<template>
  <view>
    <view
      class="page-header"
      :style="[{ height: 'calc(' + statusBarHeight + 'px + 88rpx)' }]"
    >
      <view class="header-content" :style="[menuButtonStyle]">
        <view
          class="back-icon"
          :class="!hasPages ? 'hidden-back' : ''"
          @click="$utils.goBack()"
        >
          <i class="iconfont icon-fanhui"></i>
        </view>
        <!--  #ifdef  APP-PLUS || H5 -->
        <view
          class="header-search add-left"
          :class="!hasPages ? 'full-width' : ''"
          :style="[{ height:'64rpx',width:'84.67%' }]"
          @click="$utils.toUrl('/other/search/searchPage')"
        >
          <view class="header-input">
            <i class="iconfont icon-search"></i>
            <text>{{$t('common.searchText')}}</text>
          </view>
        </view>
        <!--  #endif -->
        <!--  #ifndef  APP-PLUS || H5 -->
        <view
          class="header-search add-left"
          :class="!hasPages ? 'full-width' : ''"
          :style="[{ height: menuButtonInfo.height + 'px' }]"
          @click="$utils.toUrl('/other/search/searchPage')"
        >
          <view class="header-input">
            <i class="iconfont icon-search"></i>
            <text>{{$t('common.searchText')}}</text>
          </view>
        </view>
        <!--  #endif -->
      </view>
    </view>
    <view
      class="hold-place"
      :style="[{height: 'calc(' + statusBarHeight + 'px + 88rpx)'}]"
    ></view>
  </view>
</template>

<script>
import { diySysPageMixin } from "../../mixins/index";

export default {
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  mixins: [diySysPageMixin], //混入文件
  watch: {},
  data() {
    return {};
  },
  computed: {
    menuButtonStyle() {
      let obj = {}
      // #ifdef APP-PLUS || H5
      obj = {
        top: this.statusBarHeight + "px",
        height: "88rpx",
        left:"20rpx",
        lineHeight: '88rpx',
        width:'100%'
      };
      // #endif
      // #ifndef APP-PLUS || H5
      let xWidth = this.systemInfo.screenWidth - this.menuButtonInfo.right;
      obj = {
        top: this.menuButtonInfo.top + "px",
        height: this.menuButtonInfo.height + "px",
        left: xWidth + "px",
        width: this.menuButtonInfo.left - xWidth * 2 + "px",
      };
      // #endif
      // let xWidth = this.systemInfo.screenWidth - this.menuButtonInfo.right;
      // let obj = {
      //   top: this.menuButtonInfo.top + "px",
      //   height: this.menuButtonInfo.height + "px",
      //   left: xWidth + "px",
      //   width: this.menuButtonInfo.left - xWidth * 2 + "px",
      // };

      // #ifdef MP-TOUTIAO
      obj.top = '16rpx';
      // #endif
      return obj;
    },
    hasPages() {
      let pages = [];
      pages = getCurrentPages();
      return pages.length > 1;
    },
  },
  methods: {},
  filters: {},
  mounted() {},
  onReady() {},
};
</script>

<style scoped lang="scss">
.page-header {
  width: 100%;
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 511;
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
  .header-content {
    font-size: 36rpx;
    font-weight: 600;
    box-sizing: border-box;
    color: #ffffff;
    text-align: center;
    position: absolute;
    left: 4%;
    top: 0;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    .header-search {
      width: 84.67%;
      background: #f2f2f2;
      border-radius: 60px;
      display: flex;
      align-items: center;
      color: #9b9b9b;
      .header-input {
        display: flex;
        align-items: center;
        position: relative;
      }
      .iconfont {
        position: absolute;
        left: 24rpx;
        z-index: 11;
        font-size: 40rpx;
      }
      text {
        margin-left: 66rpx;
        color: #9b9b9b;
        font-size: 26rpx;
        font-weight: normal;
      }
    }
    .add-left {
      margin-left: 30rpx;
    }
    .full-width {
      width: 100%;
      margin-left: 0;
    }
    .back-icon {
      height: 100%;
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 111;
      .iconfont {
        color: #1d1d1d;
        font-size: 30rpx;
      }
    }
    .hidden-back {
      opacity: 0;
      pointer-events: none;
    }
  }
}
.hold-place {
  width: 100%;
}
</style>
